<template>
  <div class="container">
    <div class="top-div">
      <div style="display: flex;">
        <div style="margin-left: 10px;">
          案号
        </div>
        <div style="margin-left: 5px;">
          <el-input size="small" v-model="caseId" placeholder="请输入案号"></el-input>
        </div>
        <div style="margin-left: 10px;">
          标题
        </div>
        <div style="margin-left: 5px;">
          <el-input size="small" v-model="title" placeholder="请输入标题"></el-input>
        </div>
        <!--            <div style="float: left;line-height: 40px;margin-left: 10px;">
                      案件类型
                      <el-select v-model="caseType" placeholder="请选择案件类型" style="width: 100px;margin-left: 10px;"
                                 @change="caseTypeChange">
                        <el-option
                            v-for="item in caseTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </div>-->
        <div style="margin-left: 10px;">
          案件类型
        </div>
        <div style="margin-left: 5px;">
          <el-select size="small"
                     v-model="caseType"
                     clearable
                     placeholder="请输入案件类型"
                     style="margin-left: 10px;">
            <el-option
                v-for="item in caseTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div style="margin-left: 10px;">
          风险类型
          <el-select size="small"
                     clearable
                     v-model="riskType"
                     placeholder="请选择案件风险类型"
                     style="margin-left: 10px;">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-button size="small" type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="getTableList">
          搜索
        </el-button>
        <el-button size="small" icon="el-icon-refresh" style="margin-left: 10px;" @click="resetTable"></el-button>
      </div>
      <div>
        <el-button style="margin-right: 20px;" type="primary" plain size="medium" @click="gotoIndex">回到首页
        </el-button>
      </div>
    </div>
    <el-table v-loading="tableShow" :data="tableData" style="width: 100%;height: calc(100vh - 165px);overflow-y: auto;">
      <el-table-column min-width="20" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.collectFlag==0" @click="showCaseDialogFunction(scope.row)" class="el-icon-star-on"
                style="color: #acacac;font-size: 20px;cursor:pointer;"></span>
          <span v-if="scope.row.collectFlag==1" @click="showCaseDialogFunction(scope.row)" class="el-icon-star-on"
                style="color: #F56C6C;font-size: 20px;cursor:pointer;"></span>
        </template>
      </el-table-column>
      <el-table-column label="案号" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.caseId">
            <div class="tip-cell">
              {{ scope.row.caseId }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="风险值" align="center" prop="risk" sortable min-width="50">
        <template slot-scope="scope">
          <div v-if="scope.row.riskChange>0" style="display: flex;justify-content: center;">
            <div style="float: left;margin-top: 10px">
              <span>{{ scope.row.totalRisk }}</span>
            </div>
            <div style="float: left;">
              <img src="@/assets/up.png" style="width: 20px;height: 20px;margin-top: 10px;">
              <span style="color: #e54e4f;font-size: 10px;position: absolute;margin-bottom: 100px;">{{
                  scope.row.riskChange
                }}</span>
            </div>
          </div>
          <div v-else-if="scope.row.riskChange == 0" style="display: flex;justify-content: center;">
            <div style="float: left;margin-bottom: 10px">
              <span>{{ scope.row.totalRisk }}</span>
            </div>
          </div>
          <div v-else style="display: flex;justify-content: center;">
            <div style="float: left;margin-bottom: 10px">
              <span>{{ scope.row.totalRisk }}</span>
            </div>
            <div style="float: left;">
              <img src="@/assets/down.png" style="width: 20px;height: 20px;margin-bottom: 10px;">
              <span style="color: #1ce229;font-size: 10px;position: absolute;margin-bottom: 100px;padding-top: 5px;">{{
                  scope.row.riskChange
                }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="标题" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.title">
            <div class="tip-cell">
              {{ scope.row.title }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="案件类型" align="center" min-width="40">
        <template slot-scope="scope">
          <span v-if="scope.row.caseType==1">民事案件</span>
          <span v-if="scope.row.caseType==2">行政案件</span>
          <span v-if="scope.row.caseType==3">刑事案件</span>
        </template>
      </el-table-column>
      <el-table-column label="案由" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.caseCause }}</span>
        </template>
      </el-table-column>
      <el-table-column label="案件特征" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.caseFeature">
            <div class="tip-cell">
              {{ scope.row.caseFeature }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="风险值1" align="center" min-width="50" prop="risk1" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.risk1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="风险值2" align="center" min-width="50" prop="risk2" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.risk2 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="风险值3" align="center" min-width="50" prop="risk3" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.risk3 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收案日期" align="center" min-width="50" prop="registerDate" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.registerDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="50">
        <template slot-scope="scope">
          <div style="display: flex;flex-direction: column;justify-content: center;">
            <span style="color: #409EFF;cursor:pointer;" @click="showDetail(scope.row)">详情</span>
            <span style="color: #409EFF;cursor:pointer;" @click="pushDialogFunction(scope.row)">推送</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;justify-content: center;padding-top: 10px;">
      <el-pagination
          background
          :total="totalCount"
          :page-size="pageSize"
          @current-change="current_change"
          @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <show-case-dialog
        @afterSubmit="getTableList"
        ref="showCaseDialog"
    ></show-case-dialog>
    <push-case-dialog
        @afterSubmit="getTableList"
        ref="pushCaseDialog"
    ></push-case-dialog>
  </div>
</template>
<script>
import api from '@/utils/api';
import * as echarts from "echarts";
import axios from 'axios'
import data from "@/assets/data1.json";
import user from "@/json/db/user.json";
import {caseRiskList} from '@/api/caseRiskApi'
import showCaseDialog from "@/page/dialog/showCaseDialog.vue";
import pushCaseDialog from "@/page/dialog/PushCaseDialog.vue";
import {remove} from "@/api/caseDirApi";
import PushCaseDialog from "@/page/dialog/PushCaseDialog.vue";

export default {
  components: {
    PushCaseDialog,
    showCaseDialog
  },
  mounted() {
    this.clickList = JSON.parse(localStorage.getItem("clickList"))
    this.addLog()
    this.getTableList()
  },
  computed: {},
  data() {
    return {
      clickList: [],
      caseTypeOptions: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '民事'
        },
        {
          value: 2,
          label: '行政'
        },
        {
          value: 3,
          label: '刑事'
        }
      ],
      caseId: '',
      title: '',
      caseType: 0,
      riskType: 0,
      options: [{
        value: 0,
        label: '全部'
      }, {
        value: 1,
        label: '仅风险上升'
      }, {
        value: 2,
        label: '仅风险下降'
      }],
      pageNum: 1,
      pageSize: 8,
      tableShow: false,
      totalCount: 1,
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      tableData: [],
      sourceTableData: []
    }
  },
  methods: {
    gotoIndex(){
      this.$router.push({path: '/index_yz'});
    },
    pushDialogFunction(data) {
      this.$refs.showCaseDialog.open(data);
    },
    showCaseDialogFunction(data) {
      if (data.caseDirId != '' && data.collectFlag == 1) {
        const self = this
        const obj = {}
        obj.id = data.caseDirId
        remove(obj).then(data => {
          if (data.code == 200) {
            self.getTableList()
          } else {
            self.$message.error(data.msg);
          }
        })
      } else {
        this.$refs.pushCaseDialog.open(data);
      }
    },

    getTableList() {
      const self = this;
      self.tableShow = true
      const param = {}
      param.pageNum = self.pageNum
      param.pageSize = self.pageSize
      param.caseId = self.caseId
      param.title = self.title
      param.caseType = self.caseType
      param.riskType = self.riskType
      param.userId = this.$globalUserId

      if (self.clickList != null && self.clickList.length > 0) {
        param.clickList = self.clickList
      }
      caseRiskList(param).then(response => {
        if (response.code == 200) {
          self.tableData = response.data.data;
          self.totalCount = response.data.total;
          self.tableShow = false
          if (self.totalCount !== 0) {
            if (self.pageNum > Math.ceil(response.data.total / self.pageSize)) {
              self.pageNum = Math.ceil(response.data.total / self.pageSize);
              self.getTableList();
            }
          }
        } else {
          self.$message.error(response.msg);
        }
      })
    },
    current_change(currentPage) {
      this.pageNum = currentPage;
      this.getTableList();
    },
    handleSizeChange(newPageSize) {
      this.pageSize = newPageSize;
      this.getTableList();
    },
    addLog() {
      const user = require("@/json/db/user.json")
      const obj = {}
      obj.module = '案件风险数据'
      obj.content = '查看了【案件风险详情】'
      obj.userName = user.userName
      api.addLog(obj);
    },
    showDetail(item) {
      const data = {
        doc_id: item.doc_id,
        case_no: item.case_no,
        procedure: item.procedure,
        case_category: item.case_category,
        case_type: item.case_type,
        first_instance: item.first_instance,
        dispute_focus: item.dispute_focus,
        bottomDataList: item.parties
      }
      const dataV1 = "{\"doc_id\":10001,\"case_no\":\"（2023）湘行终911号\",\"procedure\":\"二审\",\"case_category\":\"行政案件\",\"case_type\":\"其他行政行为\",\"first_instance\":\"湖南省湘潭市中级人民法院（2023）湘03行初49号行政裁定\",\"dispute_focus\":\"案涉木瓜（家）塘的权属确认，征收补偿款的分配\",\"bottomDataList\":[{\"name\":\"某村场组\",\"position\":\"上诉人（原审起诉人）\",\"representative\":\"程某\",\"agent\":[\"黄健\",\"尹长云\"]}]}";
      const dataV2 = "{\"doc_id\":10007,\"case_no\":\"（2023）湘行终890号\",\"procedure\":\"二审\",\"case_category\":\"行政案件\",\"case_type\":\"行政处罚\",\"first_instance\":\"湖南省长沙市中级人民法院（2023）湘01行初345号行政判决\",\"dispute_focus\":\"行政处罚的事实认定及处罚标准的适当性\",\"bottomDataList\":[{\"name\":\"某环保公司\",\"position\":\"上诉人（原审原告）\"},{\"name\":\"湖南省生态环境厅\",\"position\":\"被上诉人（原审被告）\"}]}";
      const dataV3 = "{\"doc_id\":10009,\"case_no\":\"（2023）湘行终567号\",\"procedure\":\"二审\",\"case_category\":\"行政案件\",\"case_type\":\"土地纠纷\",\"first_instance\":\"湖南省长沙市中级人民法院（2023）湘01行初890号行政判决\",\"dispute_focus\":\"土地权属的确认及征地补偿款的分配\",\"bottomDataList\":[{\"name\":\"张某\",\"position\":\"上诉人（原审原告）\"},{\"name\":\"王某\",\"position\":\"被上诉人（原审被告）\"}]}";
      const dataV4 = "{\"doc_id\":10008,\"case_no\":\"（2023）湘刑终456号\",\"procedure\":\"二审\",\"case_category\":\"刑事案件\",\"case_type\":\"故意伤害罪\",\"first_instance\":\"湖南省长沙市中级人民法院（2023）湘01刑初789号刑事判决\",\"dispute_focus\":\"被告人是否构成故意伤害罪及量刑标准\",\"bottomDataList\":[{\"name\":\"李某\",\"position\":\"上诉人（原审被告）\"},{\"name\":\"湖南省人民检察院\",\"position\":\"被上诉人（原审公诉机关）\"}]}";

      const detailArray = []
      detailArray.push(dataV1, dataV2, dataV3, dataV4)
      const randomElement = detailArray[Math.floor(Math.random() * detailArray.length)];
      localStorage.setItem("detailKey", randomElement)
      this.$router.push({
        path: '/detail1'
      })
    },
    // sortChange(val) {
    //   if (val == '全部') {
    //     this.total = this.tableData.length
    //     this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    //   } else if (val == '仅风险上升') {
    //     this.tableData = this.tableData.filter(d => d.total_risk_change_value > 0);
    //     this.total = this.tableData.length
    //     this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    //   } else if (val == '仅风险下降') {
    //     this.tableData = this.tableData.filter(d => d.total_risk_change_value < 0);
    //     this.total = this.tableData.length
    //     this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    //   }
    // },
    getNeedArr(array, size) {
      const length = array.length;
      if (!length || !size || size < 1) {
        return [];
      }
      let index = 0;
      let resIndex = 0;
      let result = new Array(Math.ceil(length / size));
      while (index < length) {
        result[resIndex++] = array.slice(index, (index += size));
      }
      return result;
    },
    resetTable() {
      this.caseId = ''
      this.title = ''
      this.caseType = 0
      this.riskType = 0
    },
  }
};
</script>
<style scoped>
.container-footer {
  text-align: center;
  height: 30px;
  line-height: 30px;
  padding-top: 10px;
}

.top-div {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px;
  justify-content: space-between;
}

.el-input {
  font-size: 13px;
}

.container {
  min-width: 1200px;
  display: block;
  clear: both;
}

.clearfix:after {
  clear: both
}

/deep/ .el-table .el-table__header th,
.el-table .el-table__header tr,
.el-table .el-table__header td {
  background: #f5f8fd;
}

.tip-cell {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制文本最多显示两行 */
  overflow: hidden;
  white-space: normal; /* 允许换行 */
}

.el-tooltip {
  max-width: 300px; /* 设置 Tooltip 的最大宽度，可以根据需要调整 */
}

</style>